{include file="common/header"/}
<style type="text/css">
.p10{padding:10px 0;}

.mediasList .mediasImg{width:100%; height:180px;position:relative;}
.mediasList .mediasImg [data-select="mediasImg"]{ width: 100%; height:100%; }
.mediasList .mediasImg .mediasTitle{position:absolute;left:0;right:0;bottom:0;height:25px; line-height:25px; padding:0px 10px; background:#000;color:#FFF;}
.article-add{ display:block; text-align:center;height:30px; line-height:30px; cursor:pointer; }
.mediasList .medias-item{ display:flex;  }
.mediasList .medias-item .medias-item-title{ flex:1}
.mediasList .medias-item .medias-item-img{ width: 60px; height:60px; }
.mediasList .medias-item .medias-item-img img{ width:100%;}
.news-left .active{ border:1px solid #44b549 !important}
</style>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card layui-bg-gray">
          <div class="layui-card-body">
          	<form class="layui-form layui-form-pane" lay-filter="form">
            <div class="layui-row layui-col-space15">
            	<div class="layui-col-md3 layui-col-sm6  layui-col-xs12">
            		<div class="layui-card">
            			<div class="layui-card-body news-left">
            				<div class="mediasList active">
                                <div class="btnArr" style="position: absolute;right: 7.5px; top: 7.5px;z-index: 10;display: none;">
                                    <div class="layui-btn-group">
                                        <a class="layui-btn layui-btn-danger layui-btn-xs del-item">删除</a>
                                    </div>
                                </div>
            					<div class="mediasImg">
                                    <img data-select="mediasImg" src="/static/admin/images/image.png" alt="">
            						<span class="mediasTitle" data-select="mediasTitle">新建图文</span>
            					</div>
            				</div>
            			</div>
            			<a class="article-add transition" onclick="addItem()" title="添加图文"><i class="fa fa-plus"></i></a>
        			</div>
        		</div>
        		<div class="layui-col-md9 layui-col-sm6  layui-col-xs12">
            		<div class="layui-card">
            			<div class="layui-card-body">
            				<div class="layui-form-item">
			                    <label class="layui-form-label">公众号</label>
			                    <div class=" layui-input-inline " id="box_catid">
			                        <select id="wx_id" lay-verify="required" lay-filter="checkChannel" name="wx_id">
			                            {volist name="wechat" id="vo"}
					                        <option value="{$vo.id}">{$vo.name}</option>
					                    {/volist}
			                        </select>
			                    </div>
			                    <div class="layui-form-mid layui-word-aux red">*必填</div>
			                </div>
			                <div class="layui-form-item">
	                            <label class="layui-form-label">标题</label>
	                            <div class=" layui-input-inline">
	                                <input type="text" name="title" id="title" lay-verify="required" placeholder="请输入标题" class="layui-input"> 
	                            </div>
	                            <div class="layui-form-mid layui-word-aux red">*必填</div>
	                        </div>
	                        <div class="layui-form-item">
	                            <label class="layui-form-label">作者</label>
	                            <div class=" layui-input-inline">
	                                <input type="text" name="author" id="author" placeholder="请输入作者" class="layui-input"> 
	                            </div>
	                            <div class="layui-form-mid layui-word-aux red">*必填</div>
	                        </div>
                            
	                        <div class="layui-form-item">
	                            <label class="layui-form-label">封面图</label>
	                            <div class="layui-input-inline">
	                                <input type="hidden" name="image" id="thumb" value="">
	                                <div class="layui-upload">
	                                    <button type="button" class="layui-btn layui-btn-primary" id="thumbBtn"><i class="icon icon-upload3"></i>点击上传</button>
	                                    <div class="layui-upload-list">
	                                        <img class="layui-upload-img" style="width:120px;max-height:100px;" id="muThumb" src="" title="">
	                                        <p id="thumbText"></p>
	                                    </div>
                                        <input name="show_cover_pic" id="show_cover_pic" value="1" type="checkbox" title="在正文顶部显示此图片">
	                                </div>                                
	                            </div>
	                        </div>
	                        <div class="layui-form-item">
	                            <label class="layui-form-label">摘要</label>
	                            <div class=" layui-input-inline">
	                                <textarea name="description" id="description" placeholder="请输入SEO摘要" class="layui-textarea"></textarea>
	                            </div>
	                        </div>
	                        <div class="layui-form-item">
	                            <label class="layui-form-label">详  情</label>
	                            <div class="layui-input-block">
	                                <script id="ueditor_content" name="content" type="text/plain" style="width:98%; height:300px;"></script>
	                            </div>
	                        </div>
	                        <div class="layui-form-item">
	                            <label class="layui-form-label">原文地址</label>
	                            <div class=" layui-input-inline">
	                                <input type="text" name="content_source_url" id="content_source_url" placeholder="原文地址" class="layui-input"> 
	                            </div>
	                        </div>
	                        <div class="layui-form-item">
	                            <div class="layui-input-block">
	                                <input type="hidden" name="id"  >
	                                <button type="button" class="layui-btn" lay-submit="" lay-filter="Wxsubmit">保存</button>
	                            </div>
	                        </div>
            			</div>
        			</div>
        		</div>
            </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

{include file="common/footer"/}
<script src="/static/admin/layuiadmin/lib/ace/ace.js"></script>
<script>
var layForm;
var layedit;
var layeditIndex
var info = [];
layui.use(['form', 'layer','upload','layedit'], function(){
    var layer = layui.layer,$= layui.jquery;
    layForm = layui.form;
    var upload = layui.upload;
    layedit = layui.layedit;
    var uploadInst = upload.render({
        elem: '#thumbBtn'
        ,url: '{:url("UpFiles/image")}'
        ,accept: 'images' //普通文件
        ,exts: 'jpg|png|gif' //只允许上传压缩文件
        ,done: function(res){
            $('#muThumb').attr('src',res.url);
            $('#thumb').val(res.url);
            $('.news-left div.mediasList.active [data-select="mediasImg"]').attr('src',res.url);
        }
    });

    layedit.set({
        //暴露layupload参数设置接口 --详细查看layupload参数说明
        uploadImage: {
            url: '{:url("UpFiles/edit_image")}',
            accept: 'image',
            acceptMime: 'image/*',
            exts: 'jpg|png|gif|bmp|jpeg',
            size: '20480'
        }
    });
    layeditIndex = layedit.build('ueditor_content');
    layForm.on('submit(Wxsubmit)', function(data){
        $.ajax({
            url:"{:url('wechat.Wxmaterial/add')}",
            dataType:"json", 
            type:"post",   
            headers:{'Content-Type':'application/json'},
            data:JSON.stringify(info),
            success:function(res){
                if (res.code==1) {
                    layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                        window.parent.location.href = res.url;
                    });
                } else {
                    layer.msg(res.msg, {time: 1800, icon: 2});
                }
            },
            error:function(){
                return layer.msg('操作失败');
            }
        });
    });
    $(document).on('click','.news-left .mediasList',function(){
        $(this).addClass('active').siblings().removeClass('active');
        renderFrom();
    })
	
    // 标题修改
    $('#title,#author,#description,#content_source_url').keyup(function(){
        $('.news-left div.mediasList.active [data-select="mediasTitle"]').text($('#title').val());
    })
    // 鼠标滑过显示删除按钮
    $(document).on('mouseover','.mediasList',function(){
        $(this).find('.btnArr').show();
    })
    $(document).on('mouseout','.mediasList',function(){
        $(this).find('.btnArr').hide();
    });
    // 删除事件
    $(document).on('click','.del-item',function(){
        var obj = $(this);
        if (info.length==1) {
            layer.alert('最少保留一篇文章');return;
        }
        var index = obj.parent().parent().parent().index();
        info.splice(index,1);
        obj.parent().parent().parent().remove();
        $('.news-left div.mediasList').eq(0).addClass('active');
        renderFrom();
        
    })
    setInterval(function() {
        var index = $('.news-left div.mediasList.active').index();
        var data = {
            'wx_id':$('#wx_id option:selected').val(),
            'title':$('#title').val(),
            'author':$('#author').val()?$('#author').val():'管理员',
            'show_cover_pic':$('#show_cover_pic:checked').val()?$('#show_cover_pic:checked').val():0,
            'image':$('#thumb').val()?$('#thumb').val():'/static/admin/images/image.png',
            'description':$('#description').val(),
            'content':layedit.getContent(layeditIndex),
            'content_source_url':$('#content_source_url').val(),
        };
        info[index] = data;
    }, 500);
});
function addItem(){
	var count = $('.news-left .mediasList').length;
	if(count >= 7){
		return layer.msg('最多允许增加7篇文章');
	}
	var html = '';
	html +='<div class="mediasList p10">'
    html +='<div class="btnArr" style="position: absolute;right: 7.5px; top: 7.5px;z-index: 10;display: none;">'
    html +='<div class="layui-btn-group">'
    html +='<a class="layui-btn layui-btn-danger layui-btn-xs del-item">删除</a>'
    html +='</div>'
    html +='</div>'
    html +='<div class="medias-item">'
    html +='<div class="medias-item-title">'
    html +='<div data-select="mediasTitle">新建图文</div>'
    html +='</div>'
    html +='<div class="medias-item-img">'
    html +='<img data-select="mediasImg" src="/static/admin/images/image.png" alt="" />'
    html +='</div>'
    html +='</div>'
    html +='</div>'
    var data = {
        'wx_id':$('#wx_id option:selected').val(),
        'title':'新建图文',
        'author':'',
        'image':'/static/admin/images/image.png',
        'description':'',
        'show_cover_pic':0,
        'content':'',
        'content_source_url':'',
    };
    info.push(data);
	$('.news-left').append(html);
}
function renderFrom(){
    var index = $('.news-left div.mediasList.active').index();
    forminfo = info[index];
    layedit.setContent(layeditIndex, forminfo.content, false);
    
    $('#muThumb').attr('src',forminfo.image);
    layForm.val('form',forminfo);
}
</script>